<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box1{
            background-color: orange;
        }
        div{
            background-color: yellow;
        }

        .red{
            background-color: red;
        }
        /*
            样式的冲突
                -当我们通过不同的选择器时，选中相同的元素，并且为相同的的样式设置不同的值时，此时就发生了样式冲突
            发生样式冲突时，应用那个样式由选择器的权重决定

            选择器的权重
                内联样式（行内样式）    1，0，0，0
                id选择器               0，1，0，0
                类和伪类选择器         0, 0, 1, 0
                元素选择器             0, 0, 0, 1
                通配选择器             0，0, 0, 0
                继承的样式             没有优先级

            比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越先显示（分组选择器是单独计算的）
                -选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器
                -如果优先级计算后相同，此时则优先级使用靠下的样式（上面的样式被下面的覆盖）
            
                *可以在某一个样式后面添加！important ，此时该样式会获得到最高的优先权，甚至超过内联样式 （注意：尽量不要用） 

        */    
    </style>

</head>
<body>
    <div id="box1" class="red">我是div </div>
</body>
</html>